<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>排班管理</el-breadcrumb-item>
            <el-breadcrumb-item>排班查询</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="5">
                    <el-date-picker
                        v-model="queryDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>    
                </el-col>
                <el-col :span="8">
                    <div>
                    <el-input placeholder="请输入场地名称"  v-model="queryParam.query">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                    </el-input>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div>
                    <el-button type="primary" @click="dialogVisible = true">添加排班</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
            <!--新增用户对话框-->
        <el-dialog
            title="添加用户"
            :visible.sync="dialogVisible"
            @close="ReSetDialog"
            width="40%">
            <el-form :model="userForm" :rules="userFormrules" ref="userFormruleForm" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="userForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="userForm.password" type='password'></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="ComPassword">
                    <el-input v-model="userForm.ComPassword" type='password'></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                    <el-input v-model="userForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userForm.email"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddUser">确 定</el-button>
            </span>
        </el-dialog>
            <!--修改用户对话框-->
        <el-dialog
        title="修改用户信息"
        :visible.sync="dialogEditVisible"
        @close="dialogEditClose"
        width="30%">
        <el-form :model="userInfo" :rules="userInfoFormrules" ref="userInfoFormruleForm" label-width="100px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userInfo.username" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
                <el-input v-model="userInfo.mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogEditVisible = false">取 消</el-button>
            <el-button type="primary" @click="EditUser">确 定</el-button>
        </span>
        </el-dialog>
        <el-table
                :data="this.scheduleDetailList"
                border
                stripe
                style="width: 100%">
                <el-table-column
                    type="index"
                    label="#">
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="场地名称">
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="球场名称">
                </el-table-column>
                <el-table-column
                    prop="scheduleDate"
                    label="排班日期">
                </el-table-column>
                <el-table-column
                    prop="startTime"
                    label="开始时间">
                </el-table-column>
                <el-table-column
                    prop="endTime"
                    label="结束时间">
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="价格">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="班次状态">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" @change="updateUserStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180px">
                        <template slot-scope="scope">
                        <!--{{scope.row}}-->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="GetUser(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="DelUser(scope.row)"></el-button>
                        <el-tooltip effect="dark" content="查看排班明细" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini" ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card>
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.pagenum"
                :page-sizes="[1, 2, 3, 5,10]"
                :page-size="queryParam.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.userForm.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        return{
            queryDate:"",
            queryParam:{
                query:"",
                pagenum: 1,
                pagesize: 5
            },
            scheduleDetailList:[],
            scheduleId:'669865050567462912',
            total:0,
            dialogVisible: false,
            dialogEditVisible: false,
            userForm:{
                username:"",
                password:"",
                ComPassword:"",
                mobile:"",
                email:"",
            },
            userInfo:{
              userid:"",
              username:"",
              email:"",
              mobile:""  
            },
            userFormrules:{
                username:[{required:true,message:'请输入用户名',
                            trigger:'blur'},
                            {min:3,max:10,message:'用户名的长度需在3到10个字符之间',
                            trigger:'blur'}],
                password:[{required:true,message:'请输入密码',
                            trigger:'blur'},
                            {min:3,max:10,message:'密码的长度需在3到10个字符之间',
                            trigger:'blur'}],
                ComPassword:[{required:true,message:'请再次输入密码',
                            trigger:'blur'},
                            {validator:validatePass2,
                            trigger:'blur'}],
                mobile:[{required:'true',len:11,message:'请输入正确的手机号码',trigger:'blur'}],
                email:[{required:'true',message:'请输入正确的邮箱号码',trigger:'blur'}],
            },
            userInfoFormrules:{
                mobile:[{required:'true',len:11,message:'请输入正确的手机号码',trigger:'blur'}],
                email:[{required:'true',message:'请输入正确的邮箱号码',trigger:'blur'}], 
            },
            queryScheduleParam:{
                "direction": "",
                "fastSearch": "",
                "field": "",
                "number": 1,
                "searchParams": [
                    {
                        "fieldName": "",
                        "operator": "",
                        "value": {},
                        "value1": {}
                    }
                ],
                "size": 10
            }
        };
    },
    created(){
        console.log('加载数据')
        this.getScheduleDetail(this.scheduleId)
    },
    methods:{
        async getUserList(){
            /*
            const {data:res} = await this.$http.get('users',{params : this.queryParam})
            if (res.meta.status !== 200) 
                return this.$message.error('获取用户列表失败');
            this.usersList = res.data.users;
            this.total = res.data.total;
            console.log(this.usersList)
            */
        },
        async getScheduleDetail(scheduleId){
           // const {data:res} = await this.$http.post('/api/booking/list',{params : this.queryScheduleParam})
            //  this.$axios.post('api/login',this.loginForm).then((res) => {
            //      console.log('123',res);
            //  })  
            console.log('scheduleId',scheduleId)

            console.log('token',window.sessionStorage.getItem('token'))
            //在需要的事件中直接使用
            this.$axios.get(
                `/booking/detail/listByScheduleId/`+scheduleId,
                {
                    headers:{
                        'Authorization': window.sessionStorage.getItem('token')
                    }
                }
            )
            .then(res=>{
                console.log('请求成功',res.data.data)
                this.scheduleDetailList = res.data.data;
            })
            .catch(Error=>{
                console.log('请求失败',Error)
            })
        },
        handleSizeChange(val){
            this.queryParam.pagesize = val
            this.getUserList()
        },
        handleCurrentChange(val){
            this.queryParam.pagenum=val
            this.getUserList()
        },
        async updateUserStatus(userinfo){
            //console.log(userinfo)
            const{data:res} = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
            if(res.meta.status !== 200){
                userinfo.mg_state  != userinfo.mg_state;
                return this.$message.error('更新用户信息失败！')
            }
            else{
                return this.$message.success('更新用户状态成功！')
            }
        },
        //清空表单
        ReSetDialog(){
            this.$refs.userFormruleForm.resetFields()
        },
        //添加用户
        AddUser(){
            this.$refs.userFormruleForm.validate(async valid =>{
                if(!valid) return;

                const{data:res} =await this.$http.post('users',this.userForm);
                //console.log(res)
                if(res.meta.status!==201){
                    this.$message.error(res.meta.msg)
                }
                else{
                    this.$message.success(res.meta.msg)
                    this.dialogVisible = false;
                    this.getUserList()
                }
            })
        },
        async GetUser(userId){
            //console.log(userId);
            const res = await this.$http.get(`users/${userId}`)
            console.log(res)
            if(res.data.meta.status==200){
                this.userInfo.userid = res.data.data.id
                this.userInfo.username = res.data.data.username
                this.userInfo.email  = res.data.data.email
                this.userInfo.mobile = res.data.data.mobile
                this.dialogEditVisible = true
            }
            else{
                this.$message.error(res.data.meta.msg)
            }
        },
        EditUser(){
            this.$refs.userInfoFormruleForm.validate(async valid=>{
                if(!valid) return; 

                const{data:res} = await this.$http.put(`users/`+this.userInfo.userid,this.userInfo)
                if(res.meta.status !== 200){
                    this.$message.error(res.meta.msg)
                }
                else{
                    this.$message.success('修改成功');
                    this.dialogEditVisible = false;
                    this.getUserList()
                }
            })

        },
        dialogEditClose(){
            this.$refs.userInfoFormruleForm.resetFields();
        },
        DelUser(userinfo){
            //console.log(userinfo)
            this.$confirm(`是否确认删除【${userinfo.username}】,请确认?`, '是否继续', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                            const{data:res} =await this.$http.delete('users/'+userinfo.id);
                                if(res.meta.status!==200) {
                                    this.$message.error(res.meta.msg)
                                }else{
                                    this.$message.success(res.meta.msg)
                                    this.getUserList()
                                }
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                                });          
                            });
        }
    },
}
</script>

<style lang="less" scoped>
  .el-breadcrumb{
      margin-bottom: 10px;
      font-size: 14px;
  }
  .el-table-column{
      text-align: center;
  }
  .el-pagination{
      text-align: left;
  }
  .el-form-item{
      margin-right: 50px;
  }
</style>